<template>
  <div class="px-22px pb-80px" style="background: rgba(0, 0, 0, 0.5)">
    <div class="w-full h-32px flex items-center text-12px color-white-opacity-6">
      <div>上架时间</div>
      <div class="order flex flex-col justify-between h-9px ml-2px">
        <div>
          <img :src="orderDefault" class="cursor-pointer" alt="" @click="order('time', 'desc')" />
        </div>
        <div>
          <img :src="orderActive" class="cursor-pointer" alt="" @click="order('time', 'asc')" />
        </div>
      </div>
      <div class="ml-32px">销量</div>
      <div class="order flex flex-col justify-between h-9px ml-2px">
        <div>
          <img :src="orderDefault" class="cursor-pointer" alt="" @click="order('sale', 'desc')" />
        </div>
        <div>
          <img :src="orderActive" class="cursor-pointer" alt="" @click="order('sale', 'asc')" />
        </div>
      </div>
      <spec />
    </div>
    <div v-if="listStore.topCategory == 0" class="flex w-full mb-29px mt-15px">
      <div class="w-748px">
        <div class="w-full flex mb-28px">
          <card-wrapper name="新款推荐" :path="{ name: 'New' }">
            <template #footer>
              <new />
            </template>
          </card-wrapper>
          <card-wrapper
            name="精选套餐"
            img="http://c.cdyydj.club/yydj/%E5%A5%97%E9%A4%90%E5%B0%81%E9%9D%A22.jpg"
            :path="{ name: 'Combo' }"
            class="ml-59px"
          />
          <card-wrapper
            :name="listStore.daily?.name"
            :img="JSON.parse(listStore.daily?.poster || '[]')?.url"
            :path="{ name: 'SecKill' }"
            class="ml-59px"
          />
        </div>
        <coupon-wrapper />
      </div>
      <div class="ml-45px">
        <hot-sale />
      </div>
    </div>
    <!-- <sec-kill-wrapper
      v-if="listStore.isRecommend"
      name="午餐时间"
      content="保持战斗力"
      :start="new Date('2023-1-9 12:00:00')"
      :end="new Date('2023-1-9 14:00:00')"
      :now="new Date('2023-1-9 13:40:00')"
    /> -->
    <!-- <div v-if="listStore.isRecommend" class="flex">
      <advertise
        v-if="listStore.daily.id"
        background="linear-gradient(146.46deg, #EB564A 0%, #9D1E16 99.25%)"
        line-color="#760701"
        :title="listStore.daily.name"
        :description="listStore.daily.description"
        enter="立即进入"
        :img="JSON.parse(listStore.daily.poster || '[]')?.url"
        class="ml-26px"
        @on-enter="enterRecommend"
      />
      <advertise
        background="linear-gradient(146.46deg, #F2AB52 0%, #E18717 99.25%)"
        line-color="#D87E0E"
        title="限时秒杀"
        description="花样百搭"
        enter="立即抢购"
        img="http://127.0.0.1:7001/public/static/pentakill.jpg"
        class="ml-26px"
      />
      <advertise
        background="linear-gradient(146.46deg, #D0DE82 0%, #52940B 99.25%)"
        line-color="#608B21"
        title="二杯'半价'"
        description="生活管家"
        enter="立即进入"
        img="http://127.0.0.1:7001/public/static/pentakill.jpg"
        class="ml-26px"
      />
    </div> -->
    <!-- 人气推荐 -->
    <!-- <div v-if="listStore.isRecommend" class="flex flex-wrap">
      <div
        v-for="(list, index) in listStore.highest"
        :key="list.name"
        class="mt-24px"
        :class="{ 'mr-24px': (index + 1) % 4 !== 0 }"
      >
        <product-list
          :id="list.id"
          :title="list.name"
          :img="list.imgs[0]?.url || ''"
          :score="list.score"
          :price="list.price"
          :video="list.video"
          :discount-price="list.discountPrice"
          :labels="list.sell_point"
          :sales="list.sales"
          :is-combo="listStore.isCombo"
          :tag-icon="TagIcon"
          tag-name="人气爆款"
          @on-select="addProduct(list)"
        ></product-list>
      </div>
    </div> -->
    <div class="flex flex-wrap">
      <div
        v-for="(list, index) in listStore.data"
        :key="list.name + Math.random().toString(16).slice(2, 8)"
        :class="{ 'mr-24px': (index + 1) % 4 !== 0, 'mt-24px': index > 3 }"
      >
        <product-list
          :id="list.id"
          :title="list.name"
          :img="list.imgs[0]?.url || ''"
          :score="list.score"
          :price="list.price"
          :video="list.video"
          :discount-price="list.discountPrice"
          :labels="list.sell_point"
          :sales="list.sales"
          :is-combo="listStore.isCombo"
          @on-select="addProduct(list)"
        ></product-list>
      </div>
    </div>
  </div>
  <category v-if="showCategory" :is-combo="listStore.isCombo" @on-close="closeCategory" />
  <cart-col @open-cart="openCart" />
  <cart-item v-model:show="showOpenCart" />
  <!-- <v-dialog v-model:value="showDialog">
    <template #default>
      <advertise
        background="linear-gradient(146.46deg, #EB564A 0%, #9D1E16 99.25%)"
        line-color="#760701"
        :title="listStore.daily.name"
        :description="listStore.daily.description"
        enter="立即进入"
        :img="JSON.parse(listStore.daily.poster || '[]')?.url"
        class="ml-26px"
        @on-enter="enterRecommend"
      />
    </template>
  </v-dialog> -->
  <daily-modal v-model:value="showDialog" @on:buy="buy" />
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useCategoryStore } from '@renderer/store/modules/category'
import ProductList from '@renderer/components/list/index.vue'
import Category from '@renderer/components/category/index.vue'
import CartCol from './components/cart-col.vue'
import CartItem from './components/cart-item.vue'
import { useListStore } from '@renderer/store/modules/list'
import New from '@renderer/components/new/old.vue'
import Spec from '@renderer/components/spec/index.vue'
import orderDefault from '@renderer/assets/orderDefault.svg'
import orderActive from '@renderer/assets/orderActive.svg'
import useHttp from '@renderer/utils/http'
// import { io } from 'socket.io-client'
// import Advertise from '@renderer/components/advertise/index.vue'
// import TagIcon from '@renderer/assets/highest.svg'
// import VDialog from '@renderer/components/dialog/index.vue'
import HotSale from './components/hot-sale.vue'
import CardWrapper from './components/card.vue'
import CouponWrapper from './components/coupon.vue'
// import SecKillWrapper from './components/seckill.vue'
import DailyModal from './components/dailyModal.vue'
import { useRouter } from 'vue-router'
const categoryStore = useCategoryStore()
const showCategory = ref<boolean>(false)
const showOpenCart = ref<boolean>(false)
const showDialog = ref<boolean>(false)
const closeCategory = () => (showCategory.value = false)
const listStore = useListStore()
const router = useRouter()
const addProduct = async (list: any) => {
  if (listStore.isCombo) {
    const { data: res } = await useHttp(`/combo/c/detail?id=${list.id}`).get().json()
    if (res.value.code === 200) {
      const { spus } = res.value.data
      categoryStore.setComboSpu(spus)
      categoryStore.setCombo(res.value.data)
      categoryStore.setComboSkus(
        spus.map((spu) => {
          return spu.skus.map((sku) => ({
            ...sku,
            discount: spu.discount
          }))
        })
      )
    }
  } else {
    await categoryStore.setSkus(list.id, list)
    categoryStore.setSpu(list)
  }
  showCategory.value = true
}
const openCart = () => {
  showOpenCart.value = !showOpenCart.value
}
// const onws = () => {
//   const socket = io('ws://192.168.16.251:7001/ws')
//   socket.on('connect', () => {
//     socket.emit('message', { name: 'cuvee' })
//   })

//   socket.on('data', (d) => {
//     console.log(d)
//   })
//   // 监听每日推荐消息
//   socket.on('daily', (d) => {
//     listStore.setDaily(d)
//   })
// }
onMounted(async () => {
  const { isCombo, isRecommend } = listStore.getPage as any
  listStore.setIsCombo(isCombo)
  listStore.setIsRecommend(isRecommend)
  await listStore.updateList()
  await listStore.setHighest()
  // 连接socket
  // onws()
})
// 进入每日推荐
const buy = () => {
  router.replace({ name: 'SecKill' })
}
watch(
  () => listStore.daily?.id,
  () => {
    showDialog.value = true
  }
)

// 排序
const order = (type, sort) => {
  listStore.order(type, sort)
}
</script>

<style scoped>
.order img {
  width: 6px;
  height: 3px;
}
</style>
